<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    let o = {
      name: 'lin',
      age: 19,
      gender: 'man'
    }

    // 简化后的版本
    function defineReactive(target, key, value, enumerable) {
      Object.defineProperty(target, key, {
        configurable: true,
        enumerable: !!enumerable,
        get() {
          console.log('get', key)
          return value;
        },
        set(newVal) {
          console.log('set', key, newVal)
          value = newVal;
        }
      })
    }

    // 将对象转换为响应式的
    function walk(obj) {
      let keys = Object.keys(obj);
      for(let i = 0;i < keys.length; i ++) {
        defineReactive(obj, keys[i], obj[keys[i]], true);
      }
    }
    walk(o);
  </script>
</body>
</html>